<script setup>
import doctorSchedulesApi from '@/api/doctorSchedulesApi';
import { ref, computed } from 'vue';

const doctorSchedules = ref([]);

const dialogVisible = ref(false);
const selectedDate = ref('');
const selectedDateSchedules = ref([]);

// 获取活动列表
loadDoctorSchedules();

// 页码和页面大小更新
function loadDoctorSchedules() {
    doctorSchedulesApi.search().then(result => {
      doctorSchedules.value = result.data.reverse();
      console.log(doctorSchedules.value)
    });
}

// 处理日期点击事件
function handleDateClick(date) {
  selectedDate.value = date;
  // 筛选当天的排班信息
  selectedDateSchedules.value = doctorSchedules.value.filter(schedule =>
      schedule.startTime && schedule.startTime.includes(date)
  );
  dialogVisible.value = true;
}

// 检查某日期是否有活动
function hasSchedule(dateString) {
  return doctorSchedules.value.some(schedule =>
    schedule.startTime && schedule.startTime.includes(dateString)
  );
}
</script>

<template>
  <div class="course-calendar-container">
    <el-calendar>
      <template #date-cell="{ data }">
        <div
          class="date-cell"
          @click="handleDateClick(data.day)"
          :class="{
            'has-schedule': hasSchedule(data.day)
          }"
        >
          <p
            class="day"
            :class="{
              'current-day': data.isCurrent,
              'scheduled-day': hasSchedule(data.day)
            }"
          >
            {{ data.day.split('-').slice(2).join('-') }}
          </p>
          <div class="schedule-indicator" v-if="hasSchedule(data.day)">
            <el-icon class="schedule-icon"><CircleCheck /></el-icon>
          </div>

        </div>
      </template>
    </el-calendar>

    <!-- 对话框组件 -->
    <el-dialog v-model="dialogVisible" :title="`日期：${selectedDate}`" width="600" class="schedule-dialog">
      <div v-if="selectedDateSchedules.length === 0">
        <p>当天没有排班信息</p>
      </div>
      <div v-else>
        <div class="schedule-item" v-for="schedule in selectedDateSchedules" :key="schedule.id">
          <div class="schedule-content">
            <p class="schedule-time"><strong>时间：</strong>{{ schedule.startTime.substring(11, 16) }}</p>
            <p class="schedule-longTime"><strong>预计时长：</strong>{{ schedule.longTime }}分钟</p>
            <p class="schedule-name"><strong>项目：</strong>{{ schedule.name }}</p>
            <p class="schedule-doctor"><strong>医生：</strong>{{ schedule.doctorName }}</p>
            <p class="schedule-reserve">
              <strong>预约情况：</strong>
              <span class="reserve-count">{{ schedule.reserveCount }}</span>/
              <span class="max-count">{{ schedule.totalSlots }}</span>
            </p>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.course-calendar-container {
  padding: 20px;
}

.el-calendar-table .el-calendar-day {
  height: auto;
  min-height: var(--el-calendar-cell-width);
  position: relative;
}

.date-cell {
  cursor: pointer;
  height: 100%;
  padding: 4px;
  position: relative;
}

.date-cell:hover {
  background-color: #f5f5f5;
  border-radius: 4px;
}

.day {
  text-align: right;
  font-weight: bold;
  font-size: 20px;
  color: #606266;
  background-color: #F1F1F1;
  margin: 0;
  padding: 2px 4px;
}

/* 当前日期样式 */
.day.current-day {
  color: #67C23A;
  background-color: #f0f9ff;
  border: 1px solid #67C23A;
  border-radius: 4px;
}

/* 有活动的日期样式 */
.day.scheduled-day {
  color: #409EFF;
  background-color: #f0f8ff;
  border: 1px solid #409EFF;
  border-radius: 4px;
}

/* 当前日期且有活动 */
.day.current-day.scheduled-day {
  color: #409EFF;
  background-color: #ecf5ff;
  border: 1px solid #409EFF;
}

.schedule-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
}

.schedule-icon {
  width: 12px;
  height: 12px;
  color: #409EFF;
}

.courses {
  color: #1A232A;
  background-color: #FAC858;
  font-size: 12px;
  margin-bottom: 2px;
  padding: 1px 2px;
  border-radius: 2px;
  line-height: 1.2;
}

.reserveCount {
  color: #12B7F5;
  font-weight: bold;
}

/* 对话框相关样式 */
.schedule-dialog .schedule-item {
  margin-bottom: 15px;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fafafa;
}

.schedule-dialog .schedule-item:last-child {
  margin-bottom: 0;
}

.schedule-dialog .schedule-content p {
  margin: 8px 0;
}

.schedule-dialog .schedule-time {
  font-size: 16px;
  color: #303133;
}

.schedule-dialog .schedule-name {
  font-size: 18px;
  font-weight: bold;
  color: #606266;
}

.schedule-dialog .schedule-doctor {
  font-size: 14px;
  color: #909399;
}

.schedule-dialog .reserve-count,
.schedule-dialog .max-count {
  font-weight: bold;
}

.schedule-dialog .reserve-count {
  color: #12B7F5;
}

.schedule-dialog .max-count {
  color: #F56C6C;
}


.date-cell .courses {
  display: none;
}
</style>
